<template>
  <div class="myPlayer" :id="id">
      <video ref="videoEle" :id="`item-${id}`" :poster="poster" x5-video-player-type=“h5-page” x5-video-orientation=“landscape|portrait” webkit-playsinline=“true” playsinline=“true”>
          <source :src="src" type="video/mp4">
          您的浏览器不支持Video标签。
      </video>
      <div class="playbtn" @click.stop="play">
        <i v-if="playIng" class="iconfont icon-pause-full"></i>
        <i v-else class="iconfont icon-bofang"></i>
      </div>
  </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import { toast,H5CallAPPFuction } from '@/utils/common'
export default {
    components:{
       
    },
    props:{
      poster:String,
      src:String,
      id:{
        type:String,
        default:'videoEle'
      },
      addPlay:{  // 是否调用原生app播放
        type:Boolean,
        default:false // 默认H5播放
      },
      info:''  // 额为信息
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            playIng:false,
            st:''
        })

        onMounted(()=>{
          const elevideo = document.querySelector(`#${props.id} video`)
          //elevideo.src = src
          elevideo.addEventListener('play', function () { // 播放开始执行的函数
            
            const vds = document.getElementsByTagName('video')
            for(let i=0;i<vds.length;i++){
              if(vds[i].id!=elevideo.id){
                vds[i].pause()  // 暂停所有其他video
              }
            }
            setTimeout(()=>{
              context.emit('playStatus',1)
            },1000)
          });
          elevideo.addEventListener('pause', function () { // 暂停开始执行的函数
            context.emit('playStatus',0)
          });
          elevideo.addEventListener('ended', function () { // 结束
            context.emit('playStatus',0)
          });
        })

        const play =()=>{
          if(props.addPlay){
            callAppPlay()
          }else{
            H5play()
          }
        }

        const H5play = ()=>{
            clearTimeout(state.st)
            const vele = document.querySelector(`#${props.id} video`)
            if(state.playIng){ // 播放中,则暂停
                vele.pause()
                vele.controls = false
                state.playIng = false
            }else{  // 播放
                vele.play()
                vele.controls = true
                state.playIng = true
                // 3秒后隐藏按钮
                state.st = setTimeout(()=>{
                    document.querySelector(`#${props.id} .playbtn`).style.display="none"
                },3000)
            }  
        }
        const callAppPlay = ()=>{  // 调用app播放
            console.log("appParams:",props.info)
            try {
                H5CallAPPFuction('showAdVideo',JSON.stringify(props.info)) 
            } catch (error) {
                toast('调用app播放失败')
            }
        }

        return{
            ...toRefs(state),
            play
        }
    }
}
</script>

<style lang="scss" scoped>
.myPlayer{
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: left top;
  video{
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  .playbtn{
    display: flex;
    position: absolute;
    z-index: 5;
    width: 150px;
    height: 150px;
    left: 50%;
    top: 50%;
    margin: -70px 0 0 -75px;
    //background: rgba(0,0,0,0.5000);
    border-radius:50% ;
    align-items: center;
    justify-content: center;
      i{
          color: #82FEF4;
          font-size: 50px;
      }
  }
}
</style>